<template>
  <div id="activity">
    <div class="titleImg" v-for="game in activityList" :key="game.gameTitleId">
      <div class="title_Img">
        <img :src="'/api/upload/' + game.gameTitleImg" alt="">
      </div>
    </div>
    <div class="container">
      <div class="product" v-for="game in activityList" :key="game.gameTitleId">
        <div id="test">
          <a href="#ding">
            <img class="one" src="../assets/z2.png" alt />
          </a>
        </div>
        <div class="e2_info">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17"><div class="grid-content bg-purple">
              <div class="d1">
                {{game.gameTitleContent}}
                <p>
                  <span class="d1_time">活动日期：{{formateDate(game.gameBeginTime)}} ~ {{formateDate(game.gameEndTime)}}</span>
                  <router-link tag="span" to="/pubNote" class="a1">
                    参与活动
                  </router-link>
                </p>
              </div>
            </div></el-col>
            <el-col :md="7" :lg="7" :xl="7"><div class="grid-content bg-purple-light hidden-sm-and-down">
              <div class="d2">
                <img src="../assets/s06.png" alt />
                <span>赢积分兑奖品!</span>
              </div>
            </div></el-col>
          </el-row>
        </div>
      </div>
      <div class="wrap">
        <div class="ago">
          <div class="ui_title">
            <h3>往期主题</h3>
            <a href="guangchang.html" class="more">更多</a>
          </div>
          <div class="ago_list">
            <ul class="ago_ul">
              <ActivityAgo/>
            </ul>
          </div>
          <div class="show">
            <div class="ui_title">
              <h3>作品</h3>
            </div>
            <div class="show_list">
              <ActivityNote/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import ActivityNote from '../components/activity/ActivityNote'
import ActivityAgo from '../components/activity/ActivityAgo.vue'
export default {
  data() {
    return {
      queryId: -1,
      activityList: []
    };
  },
  components:{
    ActivityNote,
    ActivityAgo
  },
  computed: {
    queryActivity() {
      let arr = [];
      for (var i = 0; i < this.activityList.length; i++) {
        if (this.activityList[i].id == this.queryId) {
          arr.push(this.activityList[i]);
        }
      }
      return arr;
      // console.log('arr',arr)
      console.log('11111')
    }
  },
  created() {
    this.queryId = this.$route.params.id;
    this.$axios.get('/api/gameTitle/getGameTitleAll',{params:{gameTitleId:this.queryId}})
    .then(res=>{
        // console.log('activityList:',res.data.data)
        this.activityList=res.data.data
    })
    .catch(err=>{
        console.log('err:',err)
    })
  },
  watch:{
       $route(to,from){
           
             this.$router.go(0)
       }
   },
  methods:{
    // 时间格式转换
    formateDate:function(datetime) {
      function addDateZero(num) {
          return (num < 10 ? "0" + num : num)
      }
      let d = new Date(datetime)
      let formatdatetime = d.getFullYear() + '-' + 
      addDateZero(d.getMonth() + 1) + '-' + addDateZero(d.getDate())
      return formatdatetime
    }
  }
};
</script>
<style lang="css" scoped>
@import "../css/activity.css";
</style>
